<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="login_div">
        <div class="login_div2">
            <div class="content">
                <div class="content_left">
                    <p style="font-size: 0.25rem;">
                        高效记录生活
                    </p>
                    <p style="color: #A9A9A9;  font-size: 0.125rem;">
                        轻松收集，有效整理
                    </p>

                    <img src="../../../public/image/login.png" />

                </div>
                <div class="content_right">
                    <p
                        style="text-align: center; margin-top: 50px;font-size: 0.3rem; color: #2d51e6; margin-bottom: 30px">
                        <img src="../../../public/image/logo.png" style="width: 4vw; height: 5vh;" />
                        欢迎登录
                    </p>


                    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon label-width="auto"
                        :rules="rules" class="demo-ruleForm" size="large">
                        <el-form-item prop="username">
                            <el-input prefix-icon="Avatar" v-model="ruleForm.username" type="text" autocomplete="off"
                                placeholder="用户名" class="input_indented" style="height: 5vh;border: 1px solid #fff;">

                            </el-input>


                        </el-form-item>
                        <el-form-item prop="password">


                            <el-input prefix-icon="Lock" v-model="ruleForm.password" type="password" autocomplete="off"
                                class="input_indented" placeholder="密码" style="height: 5vh;" />



                        </el-form-item>



                    </el-form>
                    <p style="display: flex;justify-content: space-around; color: #2d51e6; margin-top: 3vw;">
                        <span>
                            <input type="checkbox" v-model="checked.check" @click="ChangeCheckboxValue" />
                            <span @click="ChangeCheckboxValue" style="cursor: pointer; color: #000;">记住密码</span>
                        </span>
                        <span @click="ForgotPassword" style="color: #000;">忘记密码</span>
                    </p>
                    <div style="margin-left: 3vw;  width: 80%; display: flex; margin-top: 3vw;">
                        <el-button @click="resetForm(ruleFormRef)">重置</el-button>

                        <el-button type="primary" @click="submitForm()" style="margin-left: 5vw; width:10vw">
                            <el-icon color="#fff">
                                <User />
                            </el-icon> 登录</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <el-dialog v-model="centerDialogVisible" title="忘记密码" width="400" align-center>
        <el-form label-width="auto" :model="formdata" style="max-width: 351px">
            <el-form-item label="账号">
                <el-input v-model="formdata.username" />
            </el-form-item>
            <el-form-item label="验证码">
                <el-input v-model="formdata.code" style="width:200px" /> <el-button style="float: right;"
                    @click="sendCode">获取验证码</el-button>
            </el-form-item>
            <el-form-item label="新密码">
                <el-input type="password" v-model="formdata.password" />
            </el-form-item>
            <el-form-item label="确认密码">
                <el-input type="password" v-model="formdata.password2" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="verify">确认</el-button>
                <el-button type="primary" @click="centerDialogVisible = false">
                    取消
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useStore } from '@/stores/login';
import { _SendCode, _ChangePassword } from '../../api/index'
import { ElMessage } from 'element-plus'
let checked = reactive({
    check: false
})
const store = useStore();
const ruleFormRef = ref<FormInstance>()
const centerDialogVisible = ref(false)
let formdata = reactive({
    username: '',
    code: '',
    password: "",
    password2: ""
})

const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入用户名'))
    }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    }
}
let ruleForm = reactive({
    username: '',
    password: '',
})
const user = localStorage.getItem('ruleForm')
if (user) {
    ruleForm = JSON.parse(user)
}
const check = localStorage.getItem('checked')
if (check) {
    checked.check = JSON.parse(check)
}

const rules = reactive<FormRules<typeof ruleForm>>({
    username: [{ validator: validatePass, trigger: 'blur' }],
    password: [{ validator: validatePass2, trigger: 'blur' }],
})

// 登录
const submitForm = () => {
    if (ruleForm.username != '' && ruleForm.password != '') {
        console.log(ruleForm);
        store._loginActions(ruleForm)
        if (checked.check) {
            localStorage.setItem('ruleForm', JSON.stringify(ruleForm))
            localStorage.setItem('checked', JSON.stringify(checked.check))
        } else {
            localStorage.removeItem('ruleForm')
            localStorage.removeItem('checked')
        }

    }
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const ChangeCheckboxValue = () => {
    checked.check = !checked.check;
    console.log(checked);
}
// 忘记密码
const ForgotPassword = async () => {
    centerDialogVisible.value = true
}
const sendCode = async () => {
    console.log(formdata.username, 'username');

    const { data } = await _SendCode({ username: formdata.username })
    console.log(data, 'data')
    if (data.code) {
        ElMessage.success(data.message)
    } else {

        ElMessage.error(data.message)
    }
}

const verify = async () => {
    if (formdata.password !== formdata.password2) {
        ElMessage.error('两次密码不一致')
        return
    } else {
        const { data } = await _ChangePassword({ username: formdata.username, code: formdata.code, password: formdata.password, })
        console.log(data);
        if (data.code) {
            ElMessage.success(data.message)
            centerDialogVisible.value = false
            formdata = reactive({
                username: '',
                code: '',
                password: "",
                password2: ""
            })
        } else {
            ElMessage.error(data.message)
        }
    }
}

</script>

<style lang="scss" scoped>
.login_div {
    width: 100vw;
    height: 100vh;
    background: url('../../../public/image/bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;

    .login_div2 {
        width: 95vw;
        height: 95vh;
        background-color: rgba(255, 255, 255, 0.6);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;

        .content {
            width: 80vw;
            height: 70vh;
            display: flex;

            .content_left {
                width: 64%;
                height: 100%;
            }

            .content_right {
                width: 36%;
                height: 100%;
                border-radius: 20px;
                box-shadow: 0 0 5px 1px #000;
                position: relative;

                .el-form {
                    width: 80%;
                    margin-left: 10%;
                }

                .el-button {
                    width: 200px;
                    height: 50px;
                    border-radius: 50px;
                }
            }
        }
    }
}

#icon_user {
    position: absolute;
    left: 10%;
    top: 22%;
    z-index: 20;
}

#icon_lock {
    position: absolute;
    left: 10%;
    top: 32%;
    z-index: 20;
}

.dialog-footer {
    width: 351px;
    text-align: center;
    margin-left: 2vw;
}
</style>